<template>
  <grid-layout class="net-order-room" :layout="layout">
    <template #left>
      <!-- 成华区网约房 -->
      <net-order-room-tree v-model="yardId" />
      <!--      <yard-list v-if="show" v-model="yardId" :data-source="yardList" :details-visible="false" v-bind="$attrs" /> -->
    </template>
    <template #center>
      <unit-list
        v-model="buildingId"
        :api="getBuildingList"
        :yard-id="yardId"
        :details-visible="false"
        @updateUnitList="updateUnitList"
      />
    </template>
    <template #right>
      <div class="flex flex-column" style="height: 100%">
        <tabs-group
          style='width: 100%'
          v-if="unitData && unitData.length"
          v-model="unitId"
          :data-list="unitData"
          :replace-fields="{ label: 'text', value: 'id' }"
          class="flex-fixed"
        />
        <room-list :id="unitId" style="padding: 15px;width: 100%" class="flex-auth-height" />
      </div>
    </template>
  </grid-layout>
</template>

<script>
import GridLayout from '@gis/lib/layouts/grid-layout.vue';
import TabsGroup from '@gis/lib/components/tabs-group.vue';
import { useUserInfoStore } from '@gis/lib/pinia/userInfo.js';
import { handleCommonRes } from '@gis/lib/utils/resolver.js';
import { yardCoordinateHotelCount, homestayBuildingList } from '@gis/lib/api';
import YardList from '../reality-house/components/house-list/components/yard-list.vue';
import UnitList from '../reality-house/components/house-detail/components/building-list.vue';
import RoomList from './room-list.vue';
import NetOrderRoomTree from './net-order-room-tree.vue';

export default {
  name: 'net-order-room',
  components: {
    NetOrderRoomTree,
    TabsGroup,
    UnitList,
    YardList,
    RoomList,
    GridLayout,
  },
  props: {
    yard_id: { type: String, default: '' },
  },
  data() {
    return {
      show: false,
      formData: {
        hotel_name: '',
        manager: '',
      },
      layout: [
        { name: 'left', colSpan: 5, style: { padding: 0 } },
        { name: 'center', colSpan: 5, style: { padding: 0 } },
        { name: 'right', colSpan: 14, style: { padding: 0 } },
      ],
      yardId: this.yard_id,
      yardList: [],
      buildingId: '',
      unitData: [],
      unitId: '',
    };
  },
  created() {
    this.getYardList();
  },
  methods: {
    updateUnitList(data) {
      this.unitData = data;
      this.unitId = data.length ? data[0].id : '';
    },
    async getYardList() {
      this.show = false;
      // 地图扎点列表
      const data = await handleCommonRes(yardCoordinateHotelCount, { area_code: this.area_code });
      this.yardList = data && data.length ? data.map((item) => Object.assign({}, item, { key: item.yard_id })) : [];
      this.show = true;
    },
    async getBuildingList() {
      const params = { yard_id: this.yardId };
      return await handleCommonRes(homestayBuildingList(params));
    },
  },
  setup() {
    const { area_code } = useUserInfoStore();
    return { area_code };
  },
};
</script>

<style scoped lang="less">
.net-order-room {
  width: 100%;
  height: 100%;
  /deep/ .grid-layout-title {
    height: unset;
    min-height: unset;
    max-height: unset;
    padding: 0;
  }
  /deep/ .yard-list-wrapper {
    height: calc(100% - 21px);
    .yard-list-search {
      margin-top: 0;
    }
    .list-wrapper {
      height: calc(100% - 58px);
      max-height: calc(100% - 58px);
      overflow: hidden auto;
    }
  }
  /deep/ .building-list-wrapper {
    height: calc(100% - 35px);
    max-height: calc(100% - 35px);
  }
  .block-title {
    margin-bottom: 13px;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
  }
}
</style>
